<!DOCTYPE html>
<html>

	<head>
		<meta charset="utf-8">
		<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
		<title></title>
		<link href="../css/mui.min.css" rel="stylesheet" />
		<style>
			html,
			body {
				height: 100%;
				margin: 0px;
				padding: 0px;
			}
			.mui-bar{
				background: #FE635F;
			}
			
		.mui-titles{
			position: relative;
			float: right;
		}
		.mui-content{
			position: relative;
			float: left;
			width: 100%;
			padding: 10px  0px;
			display: inline-block;
			background: #FFFFFF;
		}		
		.biaoti{
			position: relative;
			float: left;
			width: calc(100% - 44px);
			height: 100%;
			display: flex;
			justify-content: space-around;
			padding-top: 5px;
			box-sizing: border-box;
		}
		
		.biaoti>div{
			width: 64px;
			height: 35px;
			font-size:15px;
            font-weight:bold;
            color:rgba(255,255,255,1);
			line-height: 35px;
		
			box-sizing: border-box;
		}
	.tiactive{
			border-bottom: 2px  solid #FFFFFF;
	}
		
		.mui-bar-nav>img:nth-child(1){
			position: relative;
			float: left;
			width: 20px;
			height: 27px;
			margin-top: 10px;
		}
		.mynews{
			position: absolute;
			width: 22px;
			height: 100%;
			right: 15px;
			z-index: 10;
		}
		.mynews>img:nth-child(1){
			width: 22px;
			height: 22px;
			margin-top: 10px;
		}
		.mynews>img:nth-child(2){
				width: 7px;
				height: 7px;
				position: absolute;
				top: 10px;
				right: 0px;
		}
			
		a{
			color:#FFFFFF;
		}
		a:active{
				color:#FFFFFF;
		}
			.leftnews,.rightnews{
			position: relative;
		    width: 100%;
			float: left;
			margin-top: 15px;
			padding: 0  15px;
			box-sizing: border-box;
		}
		.leftnews>div:nth-child(1){
			position: relative;
			float: left;
			width: 44px;
			height: 100%;
			
		}
		
		.leftnews>div:nth-child(1)>img{
			width: 44px;
			height: 44px;
			border-radius: 50%;
			}
		
		.leftnews>div:nth-child(2){
					position: relative;
					float: left;
					width: calc(100% - 54px);
					height: 100%;
					padding-left: 10px;
					box-sizing: border-box;
				    padding-bottom: 15px;
					box-sizing: border-box;
				}
		.leftnews>div:nth-child(2)>div:nth-child(1){
			width: 100%;
			height: 22px;
			line-height: 22px;
			font-size:15px;
		    font-weight:500;
		   color:rgba(51,51,51,1)
		    line-height:22px;
			text-align: left;
		}
			.neirong{
				width: 100%;
				line-height: 22px;
				font-size:14px;
				font-weight:500;
				color:rgba(51,51,51,1);
				line-height:22px;
				background:rgba(255,255,255,1);
		        border-radius:10px;
				padding: 5px  0px;
				box-sizing: border-box;
			}
			.hudate{
				width: 100%;
			height: 22px;
			
			}
			.hudate>div:nth-child(1){
				position: relative;
				float: left;
				width: 80px;
				line-height: 22px;
				font-size:11px;
				font-weight:500;
				color:rgba(153,153,153,1);
				line-height:22px;
				text-align: left;
			}
		.talking{
			position: relative;
			float: left;
			width: 100%;
			padding: 10px;
			 box-sizing: border-box;
			border-bottom: 1px solid rgba(235,235,235,1);
		}	
			
		.imgs{
			width:100%;
			position: relative;
		}	
		.imgs>img{
			position: relative;
			float: left;
			width: calc((100% - 15px)/3);
			height: 90px;
			margin-left: 5px;
			margin-top: 5px;
		}
		.zans{
			position: relative;
			float: right;
			width:calc(100% -  80px  -10px);
            height: 22px;
		}
		
		.zans>div{
			position: relative;
			float: right;
			width: 80px;
			height: 22px;
		}
		.zans>div>img{
		position: relative;
		float: left;	
		width:22px;
		height:22px;
		}
	
				
		.zans>div>span{
			position: relative;
			float: left;
			width: calc(100% -  22px);
			height: 22px;
			line-height: 22px;
			text-align: right;
			padding-right:10px;
			box-sizing: border-box;
			font-size:13px;
            font-weight:500;
            color:rgba(151,151,151,1);
		}
		
		.myactivation{
			position: fixed;
			width: 65px;
			height:65px;
			right: 15px;
			bottom: 230px;
			z-index: 10;
		}
		
		.myactivation>img{
			width: 65px;
			height: 65px;
		}
		
		.talkabout{
			position: relative;
			float: left;
			width: 100%;
			padding-bottom: 50px;
			box-sizing: border-box;
		}
		.comments {
			
			
			padding: 0px;
			box-sizing: border-box;
		}
		
		.titles{
			position: relative;
			float: left;
			width: 100%;
			height: 50px;
			line-height: 50px;
			font-size:16px;
             font-weight:500;
             color:rgba(51,51,51,1);
             line-height:50px;
			}
		.pingluns{
border-bottom:1px  solid  rgba(235,235,235,1);
		}	
	
	.hutalkingaboutss{
		position: relative;
		float: left;
		width: 100%;
		background:rgba(246,246,246,1);
border-radius:2px;
padding: 10px  10px;
box-sizing: border-box;
	}
	 .hutalkingaboutss>div{
		 position: relative;
		 float: left;
		 width: 100%;
	 }
	 
	 	.firstpeople,.secondpeople{
	 		 position: relative;
	 		 float: left;
			 font-size:14px;
              font-weight:500;
              color:rgba(57,108,165,1);
              line-height:24px;
			  letter-spacing: 1px;
			  display: inline-block;
	 }
	 	.reply{
			position: relative;
			float: left;
			font-size:14px;
			font-weight:500;
			color:rgba(57,108,165,1);
			line-height:24px;
			letter-spacing: 1px;
		}
				
				.hupinglun{
					 position: relative;
					 font-size:14px;
					 font-weight:500;
					 color:rgba(102,102,102,1);
					 line-height:24px;
					 letter-spacing: 1px;
				}
			.shirink{
				position: relative;
				float: left;
				width: 100%;
			}
			.shirink>div{
				position: relative;
				float: left;
				width: 86px;
				font-size:14px;
                 font-weight:500;
                 color:rgba(57,108,165,1);
                 line-height:24px;
			}
			.shirink>img{
				position: relative;
				float: left;
				width: 9px;
	     		height: 6px;
			    margin-top: 8px;
				margin-left: 5px;
			}
			.keys{
				position: fixed;
				width: 100%;
				height: 50px;
				bottom: 0px;
				padding: 8px   15px;
				box-sizing: border-box;
				z-index: 10;
				background:rgba(249,249,249,1);
			}
			.keys>input{
				position: relative;
				width: calc(100% - 75px);
				float: left;
				height: 35px;
				font-size:14px;
                font-weight:500;
                color:rgba(184,184,184,1);
                line-height:35px;
				border: none;
				background:rgba(255,255,255,1);
                 border-radius:15px;
				 padding-left: 20px;
				 box-sizing: border-box;
			}
			
			.keys>span{
				position: relative;
				float: right;
				width: 65px;
				text-align: center;
				 height: 35px;
				 font-size:15px;
                font-weight:500;
                color:rgba(255,255,255,1);
                line-height:35px;
				background:linear-gradient(180deg,rgba(252,126,119,1) 0%,rgba(254,96,93,1) 100%);
                border-radius:15px;
			}
			.mui-title{
				color: #FFFFFF;
			}
		</style>
	</head>

	<body contextmenu="return false;"  >
		<header class="mui-bar mui-bar-nav">
			<a class="mui-action-back mui-icon mui-icon-left-nav mui-pull-left"></a>
			<h1  class="mui-title">动态详情</h1>
		</header>

		<div class="mui-content" id="content">
			<div id='msg-list'>
				<div class="leftnews">
					<div><img src="../image/touxiangmy.png" /></div>
					<div>
						<div>张雪</div>
						<div class="hudate">
							<div>30分钟前</div>
							<div class="zans">
								<div class="comment"><span>10</span><img src="../image/comment.png" /></div>
								<div class="fablous" state=0><span>10</span><img src="../image/zanfalse.png" /></div>
							</div>
						</div>


					</div>
					<div class="talking">
						<div class="neirong">音乐让人痴迷的点，就是它的内容，它的情感，它的境界。其实，很多人听不出歌手的能力，听到喜欢的歌时，要不就是被那声音打动，或者被歌词感染，要么就是感觉这首歌，唱到了自己的心理，所以，不断的听，不断的沉溺在哪个世界之中，不能自拔。</div>
						<div class="imgs">
							<img src="../image/drug.png" />
							<img src="../image/drug.png" />
							<img src="../image/drug.png" />
							<img src="../image/drug.png" />
						</div>
					</div>

					<div class="titles">全部评论</div>

					<div class="talkabout">
							<div class="comments leftnews">
							<div><img src="../image/touxiang.png" /></div>
							<div class="pingluns">
								<div>李四</div>
								<div class="hudate">
									<div>20分钟前</div>
								</div>
								<div class="neirong">音乐让人痴迷的点，就是它的内容，它的情感，它的境界.</div>
								<div class="hutalkingaboutss">
									<div>
									<div class="firstpeople">李四</div>
									<div class="hupinglun">这就是音乐我终生热爱的音乐之一，这就是爱情</div>
									</div>
								</div>
							</div>
						</div>
						
						
						<div class="comments leftnews">
							<div><img src="../image/touxiang.png" /></div>
							<div class="pingluns">
								<div>李四</div>
								<div class="hudate">
									<div>20分钟前</div>
								</div>
								<div class="neirong">音乐让人痴迷的点，就是它的内容，它的情感，它的境界.</div>
								<div class="hutalkingaboutss">
									<div>
											<div class="firstpeople">李四</div>
									<div class="hupinglun">这就是音乐我终生热爱的音乐之一，这就是爱情</div>
									</div>
									<div>
										<div class="firstpeople">李四</div>
										<div class="reply">回复</div>
										<div class="secondpeople">陈雪:</div>
										<div class="hupinglun">这就是音乐我终生热爱的音乐</div>
									</div>
								</div>
								
								
								
							</div>
						</div>
						
						
						
					</div>
				</div>
			</div>
			
			<div class="keys" style="display:block;" ><input id="jianpanhu"  placeholder=""   type="text"    /> <span  class="already">完成</span> </div>
		</div>
		
		
	</body>
	<script src="../js/mui.min.js"></script>
	<script src="../js/jquery-3.1.1.min.js"></script>
	<script type="text/javascript" charset="utf-8">
		mui.init({})
     
	mui.plusReady(function () {
		    var	web=plus.webview.currentWebview();
				var  name=web.name;
				$("#jianpanhu").val(name)
				var  height= $(document).height();
				$(window).scrollTop(height)
		})
		
			
			//点击空白 输入框内容消失
			$("body").on("tap","#msg-list",function(e){
				var _con=$(".pingluns")
				if(!_con.is(e.target) && _con.has(e.target).length === 0)	{
					 $(".keys").css("display","none")
				}
			})
			
			//回复消息完成
			$(".keys").on("tap",".already",function(){
				 $(".keys").css("display","none")
			})
			
//点击消息评论回复			
  mui(".comments").on("tap", ".hupinglun", function(e) {
	  var  height=$(this).offset().top;
	      $(window).scrollTop(height);
	var name=$(this).siblings(".firstpeople").text();
	    $(".keys").css("display","block")	
	 $("#jianpanhu").attr("placeholder",'回复'+name);  
 var nativeWebview, imm, InputMethodManager;  
 var initNativeObjects = function() {
     if (mui.os.android) {  
         var main = plus.android.runtimeMainActivity();  
         var Context = plus.android.importClass("android.content.Context");  
         InputMethodManager = plus.android.importClass("android.view.inputmethod.InputMethodManager");  
         imm = main.getSystemService(Context.INPUT_METHOD_SERVICE);  
     } else {  
         nativeWebview = plus.webview.currentWebview().nativeInstanceObject();  
     }  
 };  
 var showSoftInput = function() {  
     if (mui.os.android) {  
         imm.toggleSoftInput(0, InputMethodManager.SHOW_FORCED);  
     } else {  
         nativeWebview.plusCallMethod({  
             "setKeyboardDisplayRequiresUserAction": false  
         });  
     }  
     setTimeout(function() {  
        //此处可写具体逻辑设置获取焦点的input  
        var inputElem = document.querySelector('input');  
               inputElem.focus();   
     }, 200);  
 };  
 mui.plusReady(function() {  
     initNativeObjects();  
     showSoftInput();  
 });  
 
 		})
	


	</script>


</html>
